@import "./common/mixin.styl"

html,body
  width 100%
  height 100%
  background rgb(252,252,252)
  overflow-x hidden
  .vip-wrapper
    margin-top computedNum(52)
    width 100%
    height 100%
    .head-wrapper
      position fixed
      top 0
      left 0
      height computedNum(52)
      font-size 0
      z-index 9
      background rgb(252,252,252)
      .back-wrapper
        width computedNum(49)
        height computedNum(52)
        background url("../img/back-icon.png") no-repeat center center
        background-size computedNum(8.5) computedNum(15)
        vertical-align top
      .title-wrapper
        width computedNum(267)
        height computedNum(52)
        line-height computedNum(52)
        font-family SimHei
        font-size computedNum(16)
        vertical-align top
      .home-wrapper
        width computedNum(59)
        height computedNum(52)
        background url("../img/home-icon.png") no-repeat center center
        background-size computedNum(18.5) computedNum(17.5)
        vertical-align top
    .content-wrapper
      width computedNum(375)
      height computedNum(667)
      background url("../img/vip-bg.png") no-repeat center center
      background-size computedNum(375) auto
      .type-wrapper
        bottom computedNum(220)
        left computedNum(27.5)
        width computedNum(320)
        height computedNum(90)
        .open-btn
          bottom computedNum(22)
          right computedNum(11)
          width computedNum(100)
          height computedNum(27)
      .month-wrapper
        background url("../img/month.png") no-repeat center center
        background-size computedNum(320) auto
      .year-wrapper
        background url("../img/year.png") no-repeat center center
        background-size computedNum(320) auto
        bottom computedNum(115)
    .mask
      position fixed
      width 100%
      height 100%
      top 0
      left 0
      background-color rgba(0, 0, 0, 0.5)
      z-index 9
      display none
      .pay-wrapper
        width: computedNum(290);
        height: computedNum(252);
        top: computedNum(180);
        left: computedNum(42.5);
        background-color: #fff;
        border-radius: computedNum(5);
        .close-wrapper
          width: computedNum(40);
          height: computedNum(40);
          top: computedNum(7);
          right: computedNum(7);
          background: url('../img/cancel-icon.png') no-repeat center center;
          background-size: computedNum(14) computedNum(14);
        .title-wrapper
          padding: computedNum(29) computedNum(20) 0 computedNum(20);
          font-size: computedNum(18);
        .pay-way-wrapper
          padding: 0 computedNum(20);
          margin-top: computedNum(30);
          .pay-method
            font-size: 0;
            margin-bottom: computedNum(25);
            .pay-icon
              vertical-align: top;
              width: computedNum(20);
              height: computedNum(20);
              margin-right: computedNum(10);
              &.wechat-icon
                background: url('../img/wechat-icon.png') no-repeat center center;
                background-size: computedNum(20) computedNum(20);
              &.alipay-icon
                background: url('../img/alipay-icon.png') no-repeat center center;
                background-size: computedNum(20) computedNum(20);
            .pay-name
              vertical-align: top;
              width: computedNum(200);
              height: computedNum(20);
              line-height: computedNum(21);
              font-family: SimHei;
              font-size: computedNum(15);
              color: #666666;
            .check-box
              vertical-align: top;
              width: computedNum(19);
              height: computedNum(20);
              background: url('../img/unselect.png') no-repeat center center;
              background-size: computedNum(19) computedNum(19);
              &.active
                background: url('../img/select.png') no-repeat center center;
                background-size: computedNum(19) computedNum(19);
        .btn-wrapper
          margin-top: computedNum(42);
          .open-btn
            width: computedNum(122);
            height: computedNum(42);
            background: #dea01e;
            border-radius: computedNum(21);
            text-align: center;
            line-height: computedNum(43);
            font-family: SimHei;
            font-size: computedNum(16);
            color: #FFFFFF;
            margin: 0 auto;